<template>
  <div style="height: 100%; width: 100%">
    <WujieVue class="item" name="mapbox" :url="mapboxUrl" :sync="true"></WujieVue>
    <WujieVue class="item" name="maptalks" :url="maptalksUrl" :sync="true"></WujieVue>
  </div>
</template>

<script>
import hostMap from "../hostMap";

export default {
  name: "Multiple",
  data() {
    return {
      mapboxUrl: hostMap("//localhost:10030/mapbox-test/"),
      maptalksUrl: hostMap("//localhost:10040/maptalks-test/"),
    };
  }
}
</script>

<style scoped>
.item {
  display: inline-block;
  border: 1px dashed #ccc;
  border-radius: 8px;
  width: 45%;
  height: calc(100% - 40px);
  margin: 20px;
  overflow: scroll;
}
</style>
